<template>
    <div class="registerAccount">
        <HeadBar title="注册"/>

         <a-form v-if="!isRegisterSuccess" class="form" 
            ref="formRef"
            :rules="rules"
            :model="formState" 
            :label-col="labelCol" 
            :wrapper-col="wrapperCol"
        >
            <a-form-item label="用户名" name="userName">
                <a-input placeholder="请输入用户名" v-model:value="formState.userName" />
            </a-form-item>
            <a-form-item label="密码"  name="password">
                <a-input type="password" placeholder="请输入密码" v-model:value="formState.password" />
            </a-form-item>
            <a-form-item label="确认密码" name="assertPassword">
                <a-input type="password" placeholder="请再次输入密码" v-model:value="formState.assertPassword" />
            </a-form-item>

             <a-form-item label="手机号"  name="phone">
                <a-input placeholder="请输入手机号" v-model:value="formState.phone" />
            </a-form-item>

            <div style="color:#fa4f4b;marginBottom:5px">为方便密码找回，请填写以下内容！</div>

            <a-form-item label="随机问题1" name="question1">
                <a-input placeholder="请输入问题" v-model:value="formState.question1" />
            </a-form-item>
            <a-form-item label="答案"  name="answer1">
                <a-input placeholder="请输入答案" v-model:value="formState.answer1" />
            </a-form-item>
            
              <a-form-item label="随机问题2"  name="question2">
                <a-input placeholder="请输入问题" v-model:value="formState.question2" />
            </a-form-item>
            <a-form-item label="答案" name="answer2">
                <a-input placeholder="请输入答案" v-model:value="formState.answer2" />
            </a-form-item>
        </a-form>

        <div v-if="!isRegisterSuccess"  class="register"  @click="onSubmit">注册</div>

        <div style="color:#727e7e;marginTop:30px" v-if="isRegisterSuccess">
            用户注册成功，{{timeCount}}s之后将前往登录页
            <h4 @click="goLogin" style="color:#e49463">立即前往</h4>
        </div>

    </div>
    
</template>

<script setup lang="ts">

import HeadBar from '@/components/HeadBar.vue'
import { reactive, toRaw, ref } from 'vue';

import {useRouter} from 'vue-router'

import {registerAccountApi} from '@/api/handleUserAccount.js'

const formRef = ref()
const formState = reactive({
    userName: "",
    password: "",
    assertPassword:"",
    phone: "",

    question1:"",
    answer1:"",
    question2:"",
    answer2:"",
});

const router = useRouter()

const isRegisterSuccess = ref(false)

const timeCount = ref(3)
const intervalFlag = ref()
const timeOutFlag = ref()


// 检查密码一致性
const checkConsitency=(rule,value)=>{
    if(value === formState.password){
        return Promise.resolve();
    }else{
        return Promise.reject('密码不一致，请重新输入');

    }
}

// 检查手机号合法性
const checkPhone = (rule,value)=>{
    let regex = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/
    if(regex.test(value)){
        return Promise.resolve()
    }else{
        return Promise.reject("请输入合法手机号")
    }
}


const rules = ref({
    userName:[
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
        },
    ],
    password:[
         {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        },
         {
            min:6,
            message: '密码长度不小于6位',
            trigger: 'blur'
        },
    ],
    assertPassword:[
         {
            required: true,
            message: '请再次输入密码',
            trigger: 'blur'
        },
        {
            validator: checkConsitency, 
            trigger: 'blur'

        }
    ],
    phone:[
         {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
        },
        {
            validator:checkPhone,
            trigger:'blur'
        }
    ],
    question1:[
        {
            required: true,
            message: '请输入问题',
            trigger: 'blur'
        },
    ],
    answer1:[
         {
            required: true,
            message: '请输入答案',
            trigger: 'blur'
        },
    ],
    question2:[
         {
            required: true,
            message: '请输入问题',
            trigger: 'blur'
        },
    ],
    answer2:[
        {
            required: true,
            message: '请输入答案',
            trigger: 'blur'
        },
    ],
})

const  labelCol = reactive({ span: 5 }) 
const   wrapperCol= reactive({ span: 18 })


const onSubmit = () => {
    formRef.value
    .validate()
    .then(async() => {
       let res =  await registerAccountApi({
            userName: formState.userName,
            password:formState.password,
            phone: formState.phone,
            randomQuestion:[
                {
                    question:formState.question1,
                    answer:formState.answer1
                },
                {
                    question:formState.question2,
                    answer:formState.answer2
                },
            ],
        })

        if(res){
            //注册成功后的回调 
            formRef.value.resetFields();
            isRegisterSuccess.value = true
            intervalFlag.value =  setInterval(()=>{
                timeCount.value--
            },1000)
            timeOutFlag.value =  setTimeout(()=>{
                goLogin()
            },3000)
        }
    })
    .catch((error) => {
        console.log(error)
    })
};


const goLogin = () =>{
    clearInterval(intervalFlag.value)
    clearTimeout(timeOutFlag.value)
    router.push("/login")
}

</script>


<style scoped lang="less">

.registerAccount{
    padding: 15px;
    font-size: 18px;
    box-sizing: border-box; 
    background-color:#fae7bc;

    min-height: calc(100vh);
    display: flex;
    flex-direction: column;

    .form{
        margin-top: 10px;
    }

     input{
        background-color: rgba(255, 255, 255,0.68);
        border: none;
        border-radius: 5px;
        outline: none;
        padding: 2px 5px;
    }

    .register{
        position: relative;
        background-color: #708775;
        color: white;
        font-weight: bold;
        border-radius: 15px;
        margin-top: 20px;
        padding: 5px 0 5px 20px;
        font-size: 18px;
        letter-spacing: 20px;
        width: 50%;
        max-width: 200px;
        align-self: center;
    }
}

:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form-item ){
     .ant-form-item-label > label{
        color:#747474;
    }
}

@media (max-width: 575px) {
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-row){
        justify-content: space-between;
    }
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form-item){
        margin-bottom: 10px;
    }
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form .ant-form-item .ant-form-item-label){
         flex: 1 1 0; 
         max-width: 32%;
         text-align: end;
    }

    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form .ant-form-item .ant-form-item-control){
        flex: 1 1 0; 
        max-width: 65%;
    }
}
</style>